<template>
  <div class="sp">
    <section style="margin-bottom: 50px">
      <section style="float: right; margin-bottom: 20px">
        <el-button
          type="primary"
          @click="
            delArrItem()
            $message({
              message: '送达成功',
              type: 'success'
            })
          "
        >
          送OSS4.0平台
        </el-button>
        <el-button
          type="primary"
          @click="
            $message({
              message: '退回成功',
              type: 'success'
            })
          "
        >
          退回修改
        </el-button>
      </section>
      <Table
        :tableData="paneB.tableDataF"
        selection
        @selectionChange="handleSelectionChange"
      ></Table>
      <Pagination :total="paneB.tableDataF.row.length" />
    </section>
  </div>
</template>

<script>
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Table,
    Pagination
  },
  data() {
    return {
      paneB: {
        tableDataF: {
          col: [
            {
              prop: 'colA',
              label: '业务名称',
              width: '200px'
            },
            {
              prop: 'colB',
              label: '订单编号'
            },
            {
              prop: 'colD',
              label: '当前环节',
              width: '200px'
            },
            {
              prop: 'colE',
              label: '下载合同',
              type: 'Button',
              btnList: [{ label: '下载' }]
            },
            {
              prop: 'colF',
              label: '创建时间'
            }
          ],
          row: [
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562366',
              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: this.$baseFunc.dateFormat('YYYY-mm-dd', new Date())
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562365',
              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: '2020.11.9'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562364',
              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: '2020.11.9'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562363',
              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: '2020.11.9'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562362',
              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: '2020.11.9'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562361',
              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: '2020.11.9'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562360',
              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: '2020.11.9'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562359',

              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: '2020.11.9'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562358',
              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: '2020.11.9'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'D562357',
              colD: '总部短彩信调度员审批',
              colE: '是 | 否',
              colF: '2020.11.9'
            }
          ]
        }
      },
      indexArr: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      val.forEach(itemA => {
        this.paneB.tableDataF.row.forEach((itemB, index) => {
          if (itemA.colB === itemB.colB) {
            this.indexArr.push(index)
          }
        })
      })
    },
    delArrItem() {
      this.indexArr.forEach(item => {
        this.paneB.tableDataF.row.splice(item, 1)
      })
      this.indexArr = []
    }
  }
}
</script>

<style lang="scss" scoped></style>
